<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="shortcut icon" href="./favicon.png">

    <link rel="stylesheet" type="text/css" href="pageStyle.css"/>
    <style>
        .front {
            position: relative;
            margin: 13% auto;
        }

        .content td {
            text-align: center;
            padding: 5px 2px 5px 2px;
        }

        span {
            font-size: 13px;
        }
    </style>

    <script type="text/javascript">
        if(window !== window.top) {
            window.top.location.reload();
        }
    </script>

</head>
<body>
<div class="back">
    <div class="front">
        <table class="content">
            <tr>
                <th colspan="2">用户登录</th>
            </tr>
            <tr>
                <td>账号：</td>
                <td>
                    <label for="id"><input type="text" name="id" id="id" required></label>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <label for="password"><input type="password" name="password" id="password" required></label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label><input name="userType" type="radio" value="false" checked/>普通用户</label>
                    <label><input name="userType" type="radio" value="true"/>管理员</label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" name="btn_login" id="btn_login" value="登录">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span>Not Registered?&nbsp;<a href="./register.jsp">创建账户</a></span>
                </td>
            </tr>
        </table>
    </div>
</div>

<script>
    let btn_login = document.getElementById("btn_login");
    btn_login.addEventListener("click", function () {
        let id_str = document.getElementById("id").value;
        let pwd_str = document.getElementById("password").value;

        let radio_group = document.getElementsByName("userType");
        let userType_str = "false";
        for (let i = 0; i < radio_group.length; i++)
            if (radio_group[i].checked)
                userType_str = radio_group[i].value;

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "login.do", false);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");

        xhr.onreadystatechange = function () {
            //这步为判断服务器是否正确响应
            if (xhr.readyState === 4 && xhr.status === 200) {
                if (xhr.responseText === "false")
                    alert("用户名、用户类型或密码错误！");
                else
                    window.location.href = xhr.responseText;
            } else
                alert("连接断开！");
        }

        //发送请求
        xhr.send("id=" + id_str + "&password=" + pwd_str + "&userType=" + userType_str);

    });
</script>
</body>
</html>
